<template>
	<NavBar :obj="{ title: title, color: '#000', backgroundColor: '#fff' }" />

	<view class="container">
		<view class="show-load" v-if="showLoad" style="padding: 30rpx">
			<up-loading-icon text="加载中" textSize="13"></up-loading-icon>
		</view>

		<view class="titles" v-if="order_id">选择新的收货地址</view>

		<view class="item" v-for="(item, index) in list" :key="index" @click="chooseAddress(item)">
			<view class="top">
				<image src="/static/address/ic_dizglitub@2x.png" class="icon"></image>
				<text class="details line-2-clamp">{{ item.address }}{{ item.details }}</text>
			</view>
			<view class="middle">
				<text class="nickname">{{ item.nickname }}</text>
				<text class="tel">{{ item.tel }}</text>
			</view>
			<view class="bottom flex items-center justify-between">
				<view class="left flex items-center" @click="setDefault(item, index)">
					<image :src="item.default == 1 ? '/static/cart/ic_gwcyixz.png' : '/static/cart/ic_gwcweix@2x.png'"></image>
					<text>{{ item.default == 1 ? '默认地址' : '设为默认' }}</text>
				</view>
				<view class="right flex items-center" @click="deleteAddress(item.id)" v-if="!choose && !order_id">
					<up-icon name="trash" size="20" color="#999"></up-icon>
					<text>删除</text>
				</view>
			</view>
			<image v-if="!choose && !order_id" src="/static/address/ic_dizbji@2x.png" class="edit-icon" @click="goUrl('/pages/address/add?id=' + item.id)"></image>
		</view>

		<view class="empty" style="padding-bottom: 20%" v-if="!list.length && !showLoad">
			<up-empty icon="/static/product/ic_zerodata@2x.png" iconSize="392rpx" marginTop="50%" text="暂无地址" />
		</view>
	</view>

	<view class="fixed-bottom" v-if="!order_id">
		<view class="btn" @click="goUrl('/pages/address/add?choose=' + choose)">
			<image src="/static/address/ic_dizxinz@2x.png"></image>
			<text>添加收货地址</text>
		</view>
	</view>
</template>

<script setup>
	import { ref, nextTick } from 'vue';
	import { port, goUrl, hint, loading, closeLoading, goBack } from '../../service/port';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
	import { useThemeStore } from '@/stores/theme';
	const theme = useThemeStore();
	
	
	const list = ref([]);
	const page = ref(1);
	const showLoad = ref(true);
	const choose = ref('');
	const order_id = ref('');
	const title = ref('地址管理');

	async function getAddress() {
		showLoad.value = true;
		let res = await port('getAddress', { page: page.value });
		showLoad.value = false;
		if (res.data.length) {
			list.value = [...list.value, ...res.data];
			page.value++;
		}
	}

	onLoad((e) => {
		if (e.choose) {
			choose.value = e.choose;
		}
		if (e.order_id) {
			order_id.value = e.order_id;
			title.value = '修改订单地址';
		}
	});

	onShow(() => {
		page.value = 1;
		list.value.length = 0;
		getAddress();
	});

	onReachBottom(() => {
		getAddress();
	});

	function chooseAddress(item) {
		if (order_id.value) {
			uni.showModal({
				title: '请确认',
				content: '确定修改为当前地址吗？',
				confirmColor: '#FB3204',
				success: async function (res) {
					if (res.confirm) {
						loading();
						let res = await port('replaceAddress', { id: order_id.value, address_id: item.id });
						await nextTick();
						hint(res.msg);
						closeLoading();
						goBack();
					}
				}
			});
		} else if (choose.value) {
			uni.setStorageSync('chooseAddress', item);
			goBack();
		}
	}

	async function setDefault(item, index) {
		if (!item.default) {
			let res = await port('setDefaultAddress', { id: item.id });
			list.value.forEach((v, i) => {
				v.default = 0;
			});
			list.value[index].default = 1;
		}
	}

	function deleteAddress(id) {
		uni.showModal({
			title: '请确认',
			content: '确定要删除当前地址吗？',
			confirmColor: '#FB3204',
			success: async function (res) {
				if (res.confirm) {
					loading();
					let res = await port('deleteAddress', { id: id });
					await nextTick();
					hint(res.msg);
					page.value = 1;
					list.value.length = 0;
					getAddress();
					closeLoading();
				}
			}
		});
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}

	.titles {
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		margin: 30rpx 0;
	}



	.container {
		margin: 0 30rpx;
		padding-bottom: 120rpx;
		.item {
			margin-top: 30rpx;
			padding: 28rpx;
			background: #ffffff;
			border-radius: 20rpx;
			position: relative;

			.edit-icon {
				width: 40rpx;
				height: 39rpx;
				position: absolute;
				top: 33rpx;
				right: 30rpx;
			}

			.top {
				width: calc(100% - 70rpx);
				.icon {
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					top: 33rpx;
					left: 26rpx;
				}
				.details {
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					margin-left: 36rpx;
				}
			}
			.middle {
				margin: 37rpx 0;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				.tel {
					margin-left: 30rpx;
				}
			}
			.bottom {
				.left {
					> image {
						width: 36rpx;
						height: 36rpx;
					}
					> text {
						font-weight: 400;
						font-size: 26rpx;
						color: #333333;
						margin-left: 13rpx;
					}
				}
				.right {
					> text {
						font-weight: 400;
						font-size: 26rpx;
						color: #999999;
						margin-left: 10rpx;
					}
				}
			}
		}
	}
</style>
